<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <el-button type="primary" v-auth="auths.add" @click="add()">
          新增
        </el-button>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
    <el-table
      :data="list"
      style="margin: 10px 0px"
      row-key="permissionId"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        label="菜单名称"
        show-overflow-tooltip
        prop="name"
      ></el-table-column>
      <el-table-column
        label="url"
        show-overflow-tooltip
        prop="url"
      ></el-table-column>
      <el-table-column label="类型" width="150px">
        <template #="{ row, $index }">
          {{ typeArr[row.type] }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        show-overflow-tooltip
        prop="createTime"
      ></el-table-column>
      <el-table-column label="操作" width="250px" fixed="right">
        <template #="{ row, $index }">
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            v-auth="auths.edit"
            @click="add(row)"
          ></el-button>
          <el-popconfirm
            :title="`你确定要删除当前数据吗?`"
            width="200px"
            @confirm="removeRow(row.permissionId)"
          >
            <template #reference>
              <el-button
                type="primary"
                size="small"
                icon="Delete"
                v-auth="auths.del"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <Save ref="save" :list="list" @callback="getPage()" />
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入请求
import { permissionGetTree, permissionDelete } from '@/api/system/permission'
//引入ts类型
import { ElMessage } from 'element-plus'
import Save from './save.vue'
import { typeArr } from './type'
const save = ref()
//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)
let total = ref<number>(0)
let list = ref([])
//控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false)
let skuInfo = ref<any>({})
//组件挂载完毕
onMounted(() => {
  getPage()
})

const auths = {
  add: '/sys/permission/add',
  edit: '/sys/permission/edit',
  del: '/sys/permission/del',
}

const getPage = async () => {
  //当前分页器的页码
  let { status, data, msg } = await permissionGetTree()
  if (status == 200) {
    list.value = data
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}
//分页器下拉菜单发生变化触发
const handler = (pageSizes: number) => {
  getPage()
}

const add = (row: any) => {
  save.value.show(row)
}

const removeRow = async (id: number) => {
  //删除某一个已有商品的情况
  let result: any = await permissionDelete([id])
  if (result.status == 200) {
    //提示信息
    ElMessage({ type: 'success', message: '删除成功' })
    //获取已有全部商品
    getPage()
  } else {
    //删除失败
    ElMessage({ type: 'error', message: '系统数据不能删除' })
  }
}
</script>

<style scoped></style>
